<!--
	* @Description: Lisonglin[2:30 player]
	* @Date: 2021-08-09 15:50:34
 * @LastEditTime: 2021-08-13 22:25:22
 * @FilePath: \web\html\base_config.html
-->
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
		<meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>智慧农业-数据监测</title>
		<style>
			/* css 代码  */
		</style>
		<link type="text/css" href="../css/base_config.css" rel="stylesheet">
		<script src="../js/jquery-2.2.3.min.js"></script>
		<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
		<script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<script src="https://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
		<script src="https://cdn.highcharts.com.cn/highcharts/modules/solid-gauge.js"></script>
		<script type="text/javascript">
			var global_time=10000;
			var chart_container1,
				chart_container2,
				chart1,chart2;
			var temp_val,
				humi_val,
				light_val,
				temp1_threshold=0,
				temp2_threshold=0,
				light_threshold=0;
			function activeLastPointToolip(chart) {
				var points = chart.series[0].points;
				chart.tooltip.refresh(points[points.length -1]);
			}
			$(document).ready(function () {	
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//code for IE7+,Firefox,Chrome,Opera,Safari
					xmlhttp=new XMLHttpRequest();
				}
				else {
					//code for IE6,IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function() {
					if(xmlhttp.readyState==4 && xmlhttp.status==200) {
						var ret=JSON.parse(xmlhttp.responseText);
						temp1_threshold=ret.temp1_threshold;
						temp2_threshold=ret.temp2_threshold;
						light_threshold=ret.light_threshold;
						var str="温度1: "+temp1_threshold+"℃ \t\t温度2: "+temp2_threshold+"℃ \t\t光强: "+light_threshold+"%";
						document.getElementById('current_threshold').innerText=str;
					}
					else {
					}
				}
				xmlhttp.open("GET","/cgi-bin/argicultutal_cgi/get_data.cgi",true);
				xmlhttp.send();
			});
			$(document).ready(function () {
				Highcharts.setOptions({
					global: {
						useUTC: false
					}
				});
				chart_container1 = Highcharts.chart('container1', {
					chart: {
						type: 'spline',
						marginRight: 10,
					},
					title: {
						text: '实时温度数据'
					},
					credits: { //版权信息
						enabled: false
					},
					exporting: { //导出
						enabled: false
					},
					xAxis: {
						type: 'datetime',
						tickPixelInterval: 150
					},
					yAxis: {
						title: {
							text: null
						}
					},
					tooltip: {
						formatter: function () {
							return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								'<b>' + "数值：" + '</b>' + Highcharts.numberFormat(this.y, 2);
						}
					},
					legend: {
						enabled: true
					},
					series: [{
						name: '温度',
						data: (function () {
							// 生成随机值
							var data = [],
								time = (new Date()).getTime(),
								i;
							for (i = -10; i <= 0; i += 1) {
								data.push({
									x: time + i * global_time,
									y: 0
								});
							}
							return data;
						}())
					}]
				});
				chart_container2 = Highcharts.chart('container2', {
					chart: {
						type: 'spline',
						marginRight: 10,
						events: {
							load: function () {
								var series = this.series[0],
									chart = this;
								activeLastPointToolip(chart);
							}
						}
					},
					title: {
						text: '实时光照强度数据'
					},
					credits: { //版权信息
						enabled: false
					},
					exporting: { //导出
						enabled: false
					},
					xAxis: {
						type: 'datetime',
						tickPixelInterval: 150
					},
					yAxis: {
						title: {
							text: null
						}
					},
					tooltip: {
						formatter: function () {
							return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								'<b>' + "数值：" + '</b>' + Highcharts.numberFormat(this.y, 2);
						}
					},
					legend: {
						enabled: true
					},
					series: [{
						name: '光照强度',
						data: (function () {
							// 生成随机值
							var data = [],
								time = (new Date()).getTime(),
								i;
							for (i = -10; i <= 0; i += 1) {
								data.push({
									x: time + i * global_time,
									y: 0
								});
							}
							return data;
						}())
					}]
				});
			});
			$(document).ready(function () {
				// 公共配置
				Highcharts.setOptions({
					chart: {
						type: 'solidgauge'
					},
					title: null,
					pane: {
						center: ['50%', '85%'],
						size: '140%',
						startAngle: -90,
						endAngle: 90,
						background: {
							backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
							innerRadius: '60%',
							outerRadius: '100%',
							shape: 'arc'
						}
					},
					tooltip: {
						enabled: true
					},
					yAxis: {
						stops: [
							[0.1, '#55BF3B'], // green
							[0.5, '#DDDF0D'], // yellow
							[0.9, '#DF5353'] // red
						],
						lineWidth: 0,
						minorTickInterval: null,
						tickPixelInterval: 200,
						tickWidth: 0,
						title: {
							y: -70
						},
						labels: {
							y: 16
						}
					},
					plotOptions: {
						solidgauge: {
							dataLabels: { //中下方数值显示设置
								y: 5,
								borderWidth: 0,
								useHTML: true
							}
						}
					}
				});
				// 速度仪表
				chart1 = Highcharts.chart('container-speed', {
					yAxis: {
						min: 0,
						max: 100,
						title: {
							text: '温度'
						}
					},
					credits: { //网页地址显示
						enabled: false
					},
					exporting: {
						enabled:false
					},
					series: [{
						name: '温度',
						data: [0],
						dataLabels: {
							format: '<div style="text-align:center"><span style="font-size:25px;color:' +
							((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
							'<span style="font-size:14px;color:silver">摄氏度（℃）</span></div>'
						},
						tooltip: {
							valueSuffix: ' 摄氏度（℃）'
						}
					}]
				});
				// 转速仪表
				chart2 = Highcharts.chart('container-rpm', {
					yAxis: {
						min: 0,
						max: 100,
						title: {
							text: '湿度'
						}
					},
					credits: { //网页地址显示
						enabled: false
					},
					series: [{
						name: '湿度',
						data: [0],
						dataLabels: {
							format: '<div style="text-align:center"><span style="font-size:25px;color:' +
							((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
							'<span style="font-size:14px;color:silver">相对湿度（%RH）</span></div>'
						},
						tooltip: {
							valueSuffix: ' 相对湿度（%RH）'
						}
					}]
				});
			});
			//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			// 定时刷新数据
			setInterval(function () {
				var point,
					newVal,
					inc;
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//code for IE7+,Firefox,Chrome,Opera,Safari
					xmlhttp=new XMLHttpRequest();
				}
				else {
					//code for IE6,IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function() {
					if(xmlhttp.readyState==4 && xmlhttp.status==200) {
						var ret=JSON.parse(xmlhttp.responseText);
						if(temp1_threshold!=ret.temp1_threshold || temp2_threshold!=ret.temp2_threshold || light_threshold!=ret.light_threshold){
							temp1_threshold=ret.temp1_threshold;
							temp2_threshold=ret.temp2_threshold;
							light_threshold=ret.light_threshold;
							var str="温度1: "+temp1_threshold+"℃ \t\t温度2: "+temp2_threshold+"℃ \t\t光强: "+light_threshold+"%";
							document.getElementById('current_threshold').innerText=str;
						}
						temp_val=parseFloat(ret.temp_val);
						humi_val=parseFloat(ret.humi_val);
						light_val=parseInt(ret.light_val);
						/////////////////////////////////////////////////
						x = (new Date()).getTime(); // 当前时间
						chart_container1.series[0].addPoint([x, temp_val], true, true);
						chart_container2.series[0].addPoint([x, light_val], true, true);
						activeLastPointToolip(chart_container1);
						activeLastPointToolip(chart_container2);
						chart1.series[0].points[0].update(temp_val);
						chart2.series[0].points[0].update(humi_val);
					}
					else {
					}
				}
				xmlhttp.open("GET","/cgi-bin/argicultutal_cgi/get_data.cgi",true);
				xmlhttp.send();
			}, global_time);
			//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			function Func_btn_sendcmd(cmd){
				var xmlhttp;
				if(window.XMLHttpRequest)
				{
					//code for IE7+,Firefox,Chrome,Opera,Safari
					xmlhttp=new XMLHttpRequest();
				}
				else
				{
					//code for IE6,IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if(xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						if(xmlhttp.responseText=="OK")
							alert("发送成功！");
					}
					else{
					}
				}
				xmlhttp.open("GET","/cgi-bin/send_cmd.cgi?"+cmd,true);
				xmlhttp.send();
			}
			function Func_btn_setthreshold(){
				var xmlhttp;
				var t1_val=document.getElementById("edit_t1").value;
				var t2_val=document.getElementById("edit_t2").value;
				var light_val=document.getElementById("edit_light").value;
				if(window.XMLHttpRequest)
				{
					//code for IE7+,Firefox,Chrome,Opera,Safari
					xmlhttp=new XMLHttpRequest();
				}
				else
				{
					//code for IE6,IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if(xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						if(xmlhttp.responseText=="OK"){
							var str="温度1: "+t1_val+"℃\t\t温度2: "+t2_val+"℃\t\t光强: "+light_val+"%";
							document.getElementById('current_threshold').innerText=str;
							alert("阈值设置成功！");
						}
						else{
							alert("阈值设置失败！");
						}
					}
					else{
					}
				}
				xmlhttp.open("GET","/cgi-bin/set_threshold.cgi?t1="+t1_val+"&t2="+t2_val+"&light="+light_val,true);
				xmlhttp.send();
			}
		</script>	
	</head>
	<body>
		<!-- 导航栏 -->
		<div>
			<ul class="nav">
				<li><a href="base_config.html">数据监测</a></li>
				<li><a href="query_data.html">查询数据</a></li>
				<li><a href="user_info.html">用户信息</a></li>
				<li><a href="login.html">切换账号</a></li>
			</ul>
		</div>
		<!-- 页面标题 -->
		<h1>智慧农业-数据监测</h1>
		<hr>
		<!-- 曲线图实时更新数据 -->
		<div>
			<div id="container1"></div>
			<div id="container2"></div>
		</div>
		<div id="class_bottom">
			<div id="container3">
				<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
				<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
			</div>
			<div id="control_bar">
				<div id="set_val_class">
					<form id="tab_form">
						<table id="tab_set">
							<当前阈值>
							<p id="current_threshold"></p>
							<tbody id="setval_body">
								<tr>
									<td class="set">温度阈值1：</td>
									<td class="set"><input type="text" id="edit_t1"></td>
								</tr>
								<tr>
									<td class="set">温度阈值2：</td>
									<td class="set"><input type="text" id="edit_t2"></td>
								</tr>
								<tr>
									<td class="set">光照强度阈值：</td>
									<td class="set"><input type="text" id="edit_light"></td>
								</tr>
							</tbody>
							<tfoot>
								<td></td>
								<td><input type="button" id="set_val_btn" value="确认设置" onclick="Func_btn_setthreshold()"><br></td>
							</tfoot>
						</table>
					</form>
				</div>
				<div id="cmd_btn_class">
					<table id="tab_btn">
						<tbody id="cmdbtn_body">
							<tr>
								<td class="btn"><input type="button" class="btn" value="打开LED" onclick="Func_btn_sendcmd('+LED_ON')"><br></td>
								<td class="btn"><input type="button" class="btn" value="关闭LED" onclick="Func_btn_sendcmd('+LED_OFF')"><br></td>
								<td class="btn"><input type="button" class="btn" value="打开BEEP" onclick="Func_btn_sendcmd('+BEEP_ON')"><br></td>
							</tr>
							<tr>
								<td class="btn"><input type="button" class="btn" value="打开FAN1" onclick="Func_btn_sendcmd('+FAN0_ON')"><br></td>
								<td class="btn"><input type="button" class="btn" value="关闭FAN1" onclick="Func_btn_sendcmd('+FAN0_OFF')"><br></td>
								<td class="btn"><input type="button" class="btn" value="关闭BEEP" onclick="Func_btn_sendcmd('+BEEP_ON')"><br></td>
							</tr>
							<tr>
								<td class="btn"><input type="button" class="btn" value="自动模式" onclick="Func_btn_sendcmd('!AUTO')"><br></td>
								<td class="btn"><input type="button" class="btn" value="手动模式" onclick="Func_btn_sendcmd('!MUNUAL')"><br></td>
								<td class="btn"><input type="button" class="btn" value="打开FAN1" onclick="Func_btn_sendcmd('+FAN1_ON')"><br></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

